<template>
  <v-main>
    <v-app-bar
        flat
        fixed
        align="center"
        style="background-image:linear-gradient(#B26AFC,#c99bff);"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="1" class="text-left px-0">
            <v-btn icon class="ml-n3">
              <v-icon color="white">mdi-barcode-scan</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="10" class="">
            <v-chip color="white" class="full-width mt-2" to="/home/discover" replace>
              <v-icon size="20">mdi-magnify</v-icon>
              &nbsp;搜索
            </v-chip>
          </v-col>
          <v-col cols="1" class="text-right px-0">
            <v-btn icon to="/messages" class="ml-n2">
              <v-badge
                  color="red"
                  :value="unreadMessageCount"
                  :content="unreadMessageCount"
                  offset-x="10"
                  offset-y="10"
              >
                <v-icon color="white">mdi-message-text-outline</v-icon>
              </v-badge>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="carousel-bg pt-15 pb-1">
      <v-carousel
          :continuous="true"
          cycle
          :show-arrows="false"
          hide-delimiter-background
          delimiter-icon="mdi-square-medium"
          height="220"
          interval="4000"
          v-model="model"
      >
        <v-carousel-item v-if="loading">
          <v-card width="100%" height="100%" color="grey lighten-4">
            <v-row
                class="fill-height ma-0"
                align="center"
                justify="center"
            >
              <v-progress-circular
                  indeterminate
                  color="primary"
              ></v-progress-circular>
            </v-row>
          </v-card>
        </v-carousel-item>
        <v-carousel-item v-else v-for="(item,i) in carousels" :key="i">
          <v-card width="100%" height="100%" color="grey lighten-4" @click="gotoPage(item)">
            <v-img height="100%" width="100%" :src="getSrc(item)">
              <template v-slot:placeholder>
                <v-row
                    class="fill-height ma-0"
                    align="center"
                    justify="center"
                >
                  <v-progress-circular
                      indeterminate
                      color="primary"
                  ></v-progress-circular>
                </v-row>
              </template>
            </v-img>
          </v-card>
        </v-carousel-item>
      </v-carousel>
    </v-container>

    <v-container class="pt-0 mb-15">
      <v-card-title class="py-2">为你推荐</v-card-title>
      <v-divider></v-divider>
      <v-row v-for="(item,index) in items" :key="index" class="my-2">
        <v-col cols="12" class="py-0 mb-n3">
          <v-list three-line v-if="isProduction(item)">
            <v-list-item :to="`/production/${item.pid}`">
              <v-list-item-avatar rounded size="70">
                <v-img v-if="getImgAndPath(item)" :src="getImgAndPath(item)"></v-img>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
                <v-list-item-subtitle>
                  <div>
                    {{ item.brandName }} {{item.favouriteCount}}次收藏
                  </div>
                  <v-rating
                      class="d-inline"
                      readonly
                      background-color="yellow accent-4"
                      color="yellow accent-4"
                      dense
                      half-increments
                      hover
                      :value="parseFloat(item.avgScore)"
                      size="15">
                  </v-rating>
                  <div class="text-caption d-inline ml-2 mt-1">{{parseFloat(item.avgScore).toFixed(2)}}</div>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>

          <v-list three-line v-if="isArticle(item)">
            <v-list-item :to="`/article/${item.aid}`">
              <v-list-item-avatar rounded size="70">
                <v-avatar color="secondary" rounded size="70"><span class="white--text text-h5">{{ item.title }}</span>
                </v-avatar>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
                <v-list-item-subtitle>{{item.approveCount}}个点赞 {{item.favouriteCount}}次收藏</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-col>
      </v-row>
      <load-more :loading="loadingMore" v-if="hasMore" @onLoadMore="loadMore"></load-more>
    </v-container>
  </v-main>
</template>

<script>
import {b64_to_utf8, printMsg} from "../util/util";
import {baseUrl, imgPrefixUrl} from "../myConfig";
import LoadMore from "../components/LoadMore";

export default {
  name: "Index.vue",
  components: {LoadMore},
  data: () => ({
    model: 0,
    colors: [
      'primary',
      'secondary',
      'yellow darken-2',
      'red',
      'orange',
    ],
    unreadMessageCount: 0,
    carousels: [],
    items: [],
    loading: true,
    loadingMore: '',
    hasMore: true,
    page: 0,
    row: 5,
    articles: [],
    productions: [],
  }),
  methods: {
    getImgAndPath(item) {
      if (item.pictureList) {
        return baseUrl + imgPrefixUrl + item.pictureList[0]
      } else {
        return ''
      }
    },
    getUnreadCount() {
      let data = {
        toUid: this.$store.state.uid
      }
      this.$http.post('message/listUnreadMessageCount', data).then(res => {
        if (res.data) {
          this.unreadMessageCount = parseInt(res.data)
        }
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    getCarousels() {
      let data = {}
      this.$http.post('carousel/listCarousel', data).then(res => {
        this.carousels = res.data ? res.data : []
        this.loading = false
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loading = false
      })
    },
    getSrc(item) {
      return baseUrl + imgPrefixUrl + item.picture
    },
    gotoPage(item) {
      this.$router.push('/' + item.type + '/' + item.toId)
    },
    loadMore() {
      let data = {
        keyword: '',
        mode: "all",
        page: 1,
        row: (this.page += 1) * this.row
      }
      this.$http.post('content/search', data).then(res => {
        let productions = res.data.productions
        let articles = res.data.articles
        if (productions) {
          this.productions = productions.data || []
          this.hasMore = !this.productions.length === productions.total
          this.loadingMore = false
        }
        if (articles) {
          this.articles = articles.data || []
          this.hasMore = !this.articles.length === articles.total
          this.loadingMore = false
        }
        this.items = [].concat(this.productions).concat(this.articles).sort((a, b) => {
          return (0.5 - Math.random())
        })
        printMsg(this.items)
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loading = false
      })
    },
    isProduction(item){
      return item.pid !== undefined && item.price !== undefined
    },
    isArticle(item){
      return item.aid !== undefined && item.publisher !== undefined
    }
  },

  mounted() {
    this.getCarousels()
    this.loadMore()
  },
  beforeMount() {
    printMsg(this.$route, this)
    if (this.$route.query.redirect) {
      this.$router.push(this.$route.query.redirect)
    } else {
      this.getUnreadCount()
    }
  }
}
</script>

<style scoped>
.carousel-bg {
  background-color: #c99bff;
}
</style>
